<template>
	<div>
		<div class="table_wrap">
			<div class="page-title"><h3>{{title}}</h3></div>
			<Tables 
				class="style_c" 
				:title="'虚拟IP网段配置'"  
				:tableName="'vip'" 
				:butns='butns' 
				:field='field'
				:tableData='vipTableData' 
				:curPage="vip_cur_page" 
				:pageSize="pageSize"
				:perNum='vip_size' 
				:totalNum="vip_total_num"
				:collectField="collect_field"  
				:clearSelectItems="selectedItems" 
				@reset="reset"
				:rankable="true"
                @rankData="handleRankData" 
				@loadData="_getVIPRange" 
				@sentSelectedItems="getSelectedItems" 
				@sentEditData="getEditData"
				@changePageSize='handleChangePageSize'>
		 	</Tables>
			<Tables 
				class="style_c" 
				:title="'虚拟IP保留网段配置'" 
				:tableName="'novip'" 
				:butns='butns' 
				:field='field'
				:tableData='novipTableData' 
				:curPage="novip_cur_page" 
				:pageSize="pageSize"
				:perNum='novip_size' 
				:clearSelectItem1="selectedItem1"
				:totalNum="novip_total_num" 
				:collectField="collect_field"
				@reset="reset"  
				:rankable="true"
                @rankData="handleRankData"
				@sentSelectedItem1="getSelectedItem1"
				@loadData="_getVIPRange" 
				@sentSelectedItems="getSelectedItems" 
				@sentEditData="getEditData"
				@changePageSize='handleChangePageSize'>
			</Tables>
		</div>
		
		<Modals 
			class="style_c" 
			:id="'modal'" 
			:title="add_title" 
			:field='field' 
			:collectField="collect_field"
			:selectItem="select_item" 
			:status="status" 
			:errorMsg="errorMsg" 
			:type="type"
			:selectedItems="table_name=='vip' ? selectedItems : selectedItem1" 
			:editData="edit_data" 
			@sentErrorMsg="getErrorMsg"
			@addEvent="handleAddVip"
			@editEvent="handleEditVip"
			@delEvent="handleDelVip"
		>
		</Modals>
	</div>
</template>
<script>
	import Tables from 'components/common/Tables'
	import Modals from 'components/common/Modals'
	import NetService from 'services/netService'
	import SystemService from 'services/systemService'
	import PageData from 'libs/PageData'
	
	let field = [
		{
			type:'checkbox',
		},
		{
			type:'rank',
		},
		{
			type:'ipinput',
			label:'网段',
			name:'ip',		  
			regex:/^((2[0-4]\d|25[0-5]|[01]?\d\d?)\.){3}(2[0-4]\d|25[0-5]|[01]?\d\d?)$/,
			requried:true, 
			remark:'*必填'
		},
		{
			type:'ipinput',
			label:'掩码',
			name:'mask',
			regex: /^(254|252|248|240|224|192|128|0)\.0\.0\.0$|^(255\.(254|252|248|240|224|192|128|0)\.0\.0)$|^(255\.255\.(254|252|248|240|224|192|128|0)\.0)$|^(255\.255\.255\.(255|254|252|248|240|224|192|128|0))$/ ,
			requried:true, 
			remark:'*必填'  
		},
		{
			type:'text',
			label:'VLAN',
			name:'vlan_id',
			regex: /^\d$|^[1-9]\d{0,2}$|^[1-3]\d{3}$|^40\d[0-4]$/,
			requried:true, 
			remark:'*必填(0~4094的整数)'  
		},
		{
			type:'select',
			label:'物理线路',
			name:'group_id',
			requried:true, 
			remark:'*必选'   
		}
	]
	
	export default {
		components:{
			Tables,
			Modals
		},
		data() {
			return{
				title:'网络配置',   
				add_title:'',  
				field:field,
				butns:[
					{
						type:'add',
						name:'添加',
						event:'addEvent',
						icon:`/static/img/add.png`,
						class:'add_btn',
					},
					{
						type:'del',
						name:'删除',
						event:'delEvent',
						icon:`/static/img/delete.png`,
						class:'del_btn',
					},
					{
						type:'edit',
						name:'编辑',
						event:'editEvent',
						icon:`/static/img/modpic.png`,
						class:'edit_btn',
					}
				],
				pageSize: [10, 20, 40, 80],
				per_num: 10,
				cur_page: 1,			 
				status: "",
				errorMsg: '',
				type: '',
				selectedItems: [],
				select_item: [],
				collect_field: 'id',
				table_name: '',
   
				vip_cur_page: 1,
				vip_size: 10,
				vip_total_num: 0,
				vipTableData: [],
				edit_data: {},

				novip_cur_page: 1,
				novip_size: 10,
				novip_total_num: 0,
				novipTableData: [],
				selectedItem1: [],

				vip_order: 'desc',
				vip_by: '',
				novip_order: 'desc',
				novip_by: ''
			}
		},
		created() {
			this._getVIPRange({
				oper: 'load',
				page: this.vip_cur_page,
				size: this.vip_size,
				order: this.vip_order,
				by: this.vip_by
			})
			this._getVIPReservedRange({
				oper: 'load',
				page: this.novip_cur_page,
				size: this.novip_size,
				order: this.novip_order,
				by: this.novip_by
			})
			this.getLine() 
		},
		methods:{
            handleAddVip(params) {
                params.group_id = params.group_id.replace(/[^0-9]/ig,"") 
                if (this.table_name === 'vip') {
                    params.oper = params.oper + "_vip"
                    this._createVIPRange(params)
                } else {
                    params.oper = params.oper + "_novip"
                    this._createVIPReservedRange(params)
                }
            },
            handleEditVip(params) {
                params.group_id = params.group_id.replace(/[^0-9]/ig,"") 
                if (this.table_name === 'vip') {
                    params.oper = params.oper + "_vip"
                    this._updateVIPRange(params)
                } else {
                    params.oper = params.oper + "_novip"
                    this._updateVIPReservedRange(params)
                }
            },
            handleDelVip(params) {
                if (this.table_name === 'vip') {
                    params.oper = params.oper + "_vip"
                    this._destroyVIPRange(params)
                } else {
                    params.oper = params.oper + "_novip"
                    this._destroyVIPReservedRange(params)
                }
            },
			getErrorMsg(msg) {
				this.errorMsg = msg
			},
			getSelectedItems(selectedItems) {
				this.selectedItems = selectedItems
			},
			getSelectedItem1(selectedItem1) {
				this.selectedItem1 = selectedItem1
			},
			getEditData(editdata) {
				this.edit_data = editdata 
			},
			reset(type,table_name) {
				this.status = ""
				this.errorMsg = ''
				this.type = type
				this.table_name = table_name
				if (table_name=='novip') {	 
					this.add_title = "虚拟IP保留网段"
				} else {
					this.add_title = "虚拟IP网段"
				} 
				$('.inputs_wrap .error_foramt').removeClass('error_foramt')
			},
			handleRankData(params, tableName) {
				if (tableName === 'vip') {
					params.page = this.vip_cur_page
					params.size = this.vip_size
					this.vip_order = params.order 
					this.vip_by = params.by
					this._getVIPRange(params)
				} else {
					params.page = this.novip_cur_page
					params.size = this.novip_size
					this.novip_order = params.order
					this.novip_by = params.by
					this._getVIPReservedRange(params)
				}
			},
			handleChangePageSize(page, size, tableName) {
				if (tableName === 'vip') {
					this.vip_cur_page = page
					this.vip_size = size
					let params = {
						page: this.vip_cur_page,
						size: this.vip_size,
						order: this.vip_order,
						by: this.vip_by
					}
					this._getVIPRange(params)
				} else {
					this.novip_cur_page = page
					this.novip_size = size
					let params = {
						page: this.novip_cur_page,
						size: this.novip_size,
						order: this.novip_order,
						by: this.novip_by
					}
					this._getVIPReservedRange(params)
				}
            }, 
			_getVIPRange(params) {
				this.status ='ing'  
				NetService.getVIPRange(params)
					.then((res) => {
						if (res.errcode === 0) {
							this.status ='ok'
							let data = res['11'].data 
							this.vip_total_num = new PageData(data, this.vip_size).totalpage
							let cur_page_date =  new PageData(data, this.vip_size).data(params.page)
							let page = params.page ? params.page : this.vip_cur_page
							if (!params.oper) {
								params.oper = 'load'
							}
							if (params.oper.indexOf('add') >= 0) {//添加完到最新一页
								page = this.vip_total_num
							} else if (params.oper.indexOf('del') >= 0 && cur_page_date.length === 0 && page > 1) {//删除后当前页无数据，跳到前一页
								page--
							}
							if (params.oper.indexOf('del') >= 0 || params.oper.indexOf('edit') >= 0) {
								this.selectedItems = []	  
							}
							this.vip_cur_page = page
							this.vipTableData =  new PageData(data, this.vip_size).data(page).map((item) => { 
								return {
									id: item.id,
									ip: item.ip,
									mask: item.mask,
									vlan_id: item.vlan_id,
									group_id: '线路' + item.group_id
								}
							})
						} else {
							this.status = 'error'
							this.errorMsg = res.errorMessage	
						}
					})
            },  
            _createVIPRange(params) {
                params = {
                    11: `${params.ip}|${params.mask}|${params.vlan_id}|${params.group_id}`
                }
                NetService.createVIPRange(params)
                .then((res) => {
                        if (res.errcode === 0) {
                            this.$Message.success({
                                closable: true,
                                content: '添加成功！',
                                duration: 5
                            })
                            this._getVIPRange(params)
                        }
                })
            },
            _updateVIPRange(params) {
                params = {
                    11: `${params.id}|${params.ip}|${params.mask}|${params.vlan_id}|${params.group_id}`
                }
                NetService.updateVIPRange(params)
                    .then((res) => {
                        if (res.errcode === 0) {
                            this.$Message.success({
                                closable: true,
                                content: '修改成功！',
                                duration: 5
                            })
                            this._getVIPRange(params)
                        }
                    })
            },
            _destroyVIPRange(params) {
                params = {
                    11: params.ids
                }
                NetService.destroyVIPRange(params)
                    .then((res) => {
                        if (res.errcode === 0) {
                            this.$Message.success({
                                closable: true,
                                content: '删除成功！',
                                duration: 5
                            })
                            this._getVIPRange(params)
                        }
                    })
            },
			_getVIPReservedRange(params) { 
				this.status = 'ing'  
				NetService.getVIPReservedRange(params)
				.then((res) => {
					if (res.errcode === 0) {
						this.status = 'ok'  
						let data = res['12'].data
						this.novip_total_num = new PageData(data, this.novip_size).totalpage
						let cur_page_date =  new PageData(data, this.novip_size).data(params.page)
						let page = params.page ? params.page : this.novip_cur_page
						if (!params.oper) {
							params.oper = 'load'
						}
						if (params.oper.indexOf('add') >= 0) {//添加完到最新一页
							page = this.novip_total_num
						} else if (params.oper.indexOf('del') >=0 && cur_page_date.length === 0 && page > 1) {//删除后当前页无数据，跳到前一页
							page--
						}
						if (params.oper.indexOf('del') >= 0 || params.oper.indexOf('edit') >= 0) {
							 this.selectedItem1 = []	  
						}
						this.novip_cur_page = page
						this.novipTableData = new PageData(data,this.novip_size).data(page).map((item) => { 
							return {
								id: item.id,
								ip: item.ip,
								mask: item.mask,
								vlan_id: item.vlan_id,
								group_id: '线路' + item.group_id
							}
						})	
					} else {
						this.status = 'error'
						this.errorMsg = res.errorMessage	
					}
				})
            },

            _createVIPReservedRange(params) {
                params = {
                    12: `${params.ip}|${params.mask}|${params.vlan_id}|${params.group_id}`
                }
                NetService.createVIPReservedRange(params)
                .then((res) => {
                        if (res.errcode === 0) {
                            this.$Message.success({
                                closable: true,
                                content: '添加成功！',
                                duration: 5
                            })
                            this._getVIPReservedRange(params)
                        }
                })
            },
            _updateVIPReservedRange(params) {
                params = {
                    12: `${params.id}|${params.ip}|${params.mask}|${params.vlan_id}|${params.group_id}`
                }
                NetService.updateVIPReservedRange(params)
                    .then((res) => {
                        if (res.errcode === 0) {
                            this.$Message.success({
                                closable: true,
                                content: '修改成功！',
                                duration: 5
                            })
                            this._getVIPReservedRange(params)
                        }
                    })
            },
            _destroyVIPReservedRange(params) {
                params = {
                    12: params.ids
                }
                NetService.destroyVIPReservedRange(params)
                    .then((res) => {
                        if (res.errcode === 0) {
                            this.$Message.success({
                                closable: true,
                                content: '删除成功！',
                                duration: 5
                            })
                            this._getVIPReservedRange(params)
                        }
                    })
            },
            
			getLine() {
				SystemService.getLine()
				.then((res) => {
					if (res.errcode === 0) {
						this.select_item = res.group_id.map((item)=>{
							return '线路' + item
						})
					}
				})
			},
			popoverShow(ele,content) {//删除弹窗
				$(ele).attr({
					'data-toggle': 'popover',
					'data-placement':"bottom",
					'data-content': content
				}).popover('show')
				setTimeout(function() {
					$(ele).popover('destroy')
				}, 1500)
			},
		}
	}
</script>
<style scoped lang="less">
	.table_wrap{
		background: #ffffff;
		margin: 30px;
	}
</style>